<template>
    <view class="app-container goods">
        <zzk-nav title="商品详情"></zzk-nav>
        <view class="goods-img">
            <image class="img" :src="goods.pictureOssPath" mode="aspectFill"></image>
        </view>
        <view class="goods-box">
            <view class="goods-title">
                <text class="tit">{{ goods.goodsName }}</text>
                <text class="txt">规格：{{ goods.spec }}</text>
                <text class="txt">商品类目：{{ goods.categoryName }}</text>
                <text class="txt">商品描述：{{ goods.description }}</text>
            </view>
            <view class="goods-block">
                <view>
                    <text class="tit">租赁</text>
                </view>
                <view class="line flexrow">
                    <view>
                        <text class="label">是否可租</text>
                    </view>
                    <view class="value">
                        <u-tag text="可租" size="mini" type="success" plain plainFill v-if="goods.rentable"></u-tag>
                        <u-tag text="不可租" size="mini" type="error" plain plainFill v-else></u-tag>
                    </view>
                </view>
                <template v-if="goods.rentable">
                    <view class="line flexrow">
                        <view>
                            <text class="label">押金</text>
                        </view>
                        <view class="value">
                            <text class="txt">{{ convertFenToYuan(goods.deposit) }}</text>
                        </view>
                    </view>
                    <view class="line flexrow">
                        <view>
                            <text class="label">年租金</text>
                        </view>
                        <view class="value">
                            <text class="txt">{{ convertFenToYuan(goods.priceForYear) }}</text>
                        </view>
                    </view>
                    <view class="line flexrow">
                        <view>
                            <text class="label">月租金</text>
                        </view>
                        <view class="value">
                            <text class="txt">{{ convertFenToYuan(goods.priceForMonth) }}</text>
                        </view>
                    </view>
                    <view class="line flexrow">
                        <view>
                            <text class="label">周租金</text>
                        </view>
                        <view class="value">
                            <text class="txt">{{ convertFenToYuan(goods.priceForWeek) }}</text>
                        </view>
                    </view>
                </template>
            </view>
            <view class="goods-block">
                <view>
                    <text class="tit">出售</text>
                </view>
                <view class="line flexrow">
                    <view>
                        <text class="label">是否可售</text>
                    </view>
                    <view class="value">
                        <u-tag text="可售" size="mini" type="success" plain plainFill v-if="goods.marketable"></u-tag>
                        <u-tag text="不可售" size="mini" type="error" plain plainFill v-else></u-tag>
                    </view>
                </view>
                <template v-if="goods.marketable">
                    <view class="line flexrow">
                        <view>
                            <text class="label">零售价</text>
                        </view>
                        <view class="value">
                            <text class="txt">{{ convertFenToYuan(goods.price) }}</text>
                        </view>
                    </view>
                    <view class="line flexrow">
                        <view>
                            <text class="label">vip价</text>
                        </view>
                        <view class="value">
                            <text class="txt">{{ convertFenToYuan(goods.vipPrice) }}</text>
                        </view>
                    </view>
                    <view class="line flexrow">
                        <view>
                            <text class="label">批发价</text>
                        </view>
                        <view class="value">
                            <text class="txt">{{ convertFenToYuan(goods.wholeSalePrice) }}</text>
                        </view>
                    </view>
                </template>
            </view>
            <view class="goods-block">
                <view>
                    <text class="tit">换</text>
                </view>
                <view class="line flexrow">
                    <view>
                        <text class="label">是否可换</text>
                    </view>
                    <view class="value">
                        <u-tag text="可换" size="mini" type="success" plain plainFill v-if="goods.exchangable"></u-tag>
                        <u-tag text="不可换" size="mini" type="error" plain plainFill v-else></u-tag>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { goodsInfo } from '@/api/goods.js'
import { convertFenToYuan } from '@/utils/util.js'

const id = ref('')
const goods = ref({})

onLoad((option) => {
    id.value = option.id
    getGoodsInfo()
})

const getGoodsInfo = () => {
    goodsInfo(id.value).then(res => {
        goods.value = res
    })
}
</script>

<style lang="scss" scoped>
.goods {
    padding-bottom: 80rpx;
    &-img {
        background-color: #fff;
        .img {
            display: block;
            width: 100%;
            height: 600rpx;
        }
    }
    &-box {
        padding: 20rpx $zzk-margin 0;
    }
    &-title {
        background-color: #fff;
        border-radius: 8rpx;
        padding: 24rpx;
        .top {
            align-items: center;
        }
        .tit {
            font-size: 32rpx;
            line-height: 40rpx;
            font-weight: 700;
            margin-bottom: 16rpx;
        }
        .txt {
            font-size: 24rpx;
            line-height: 40rpx;
            color: $u-info;
        }
    }
    &-block {
        background-color: #fff;
        border-radius: 8rpx;
        padding: 24rpx;
        margin-top: 20rpx;
        .tit {
            font-size: 28rpx;
            font-weight: 700;
            line-height: 40rpx;
        }
        .label {
            font-size: 28rpx;
            color: $u-info;
            line-height: 48rpx;
            width: 160rpx;
            text-align: right;
            padding-right: 20rpx;
        }
        .value {
            flex: 1;
        }
        .txt {
            font-size: 28rpx;
            line-height: 48rpx;
        }
    }
}
</style>